<template>
	<view>
		<view class="topcontent" v-if="Object.keys(datalist).length > 0">
			<view class="clinic_name">
				{{datalist.name}}
			</view>
			<view class="" style="display: flex;align-items: center;margin-top: 15rpx;">
				<view class="" style="font-size: 26rpx;color: #eaeaea;max-width: 90%;">
					注册时间：{{datalist.createtime}}
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;margin-top: 15rpx;">
				<image :src="url+'wechatimg/map.png'" mode="" style="height: 35rpx;width: 35rpx" ></image>
				<view class="" style="font-size: 26rpx;color: #eaeaea;max-width: 90%;">
					{{datalist.addresslist}}
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;margin-top: 15rpx;">
				<view class="" style="font-size: 26rpx;color: #eaeaea;">
					业务员：{{datalist.ywy}}
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;margin-top: 15rpx;">
				<view class="" style="font-size: 26rpx;color: #eaeaea;">
					血常规编号：{{datalist.blood_routine != '' ? datalist.blood_routine : '未安装'}}
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;margin-top: 15rpx;">
				<view class="" style="font-size: 26rpx;color: #eaeaea;">
					免疫编号：{{datalist.immunity_device != '' ? datalist.immunity_device : '未安装'}}
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;margin-top: 15rpx;">
				<view class="" style="font-size: 26rpx;color: #eaeaea;">
					机构标签：
				</view>
			</view>
			
			<view class="" style="display: flex;justify-content: space-between;margin-top: 20rpx;width: 94%;">
				<view class="bts" v-if="datalist.blood_routine != ''">已安装血常规</view>
				<view class="bts" v-if="datalist.immunity_device != ''">已安装免疫设备</view>
				<view class="bts">连续0日+活跃</view>
			</view>
			
			<view class="" style="display: flex;justify-content: space-around;margin-top: 20rpx;width: 94%;">
				<view class="bts2">
					<view class="" style="font-size: 34rpx;">
						试纸数量
					</view>
					<view class="" style="font-size: 34rpx;margin-top: 15rpx;">
						{{datalist.testpaper_allnum}}
					</view>
				</view>
				<view class="bts2">
					<view class="" style="font-size: 34rpx;">
						设备数量
					</view>
					<view class="" style="font-size: 34rpx;margin-top: 15rpx;">
						{{datalist.device_allnum}}
					</view>
				</view>
			</view>
			
		</view>
		<view class="" style="padding: 20rpx;" v-if="Object.keys(datalist).length > 0">
			<view>
				<view class="wid90 mar bacFFF borRad10">
					<uni-datetime-picker v-model="datetimerange" type="daterange" rangeSeparator="至" @change="changeTime"/>
				</view>
			</view>
			<view class="its">
				<view class="zl" style="display: flex;justify-content: space-between;">
					<view class="">
						数据总览
					</view>
					<view class="" style="font-size: 28rpx;" @click="go_orderlist">
						订单列表>
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;width: 95%;margin: 0px auto;margin-top: 30rpx;">
					<view class="" style="display: flex;align-items: center;flex-direction: column;">
						<view class="">
							检测金额
						</view>
						<view class="" style="margin-top: 10rpx;">
							{{datalist.testingamount}}
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;flex-direction: column;">
						<view class="">
							检测项目
						</view>
						<view class="" style="margin-top: 10rpx;">
							{{datalist.testingproject}}
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;flex-direction: column;">
						<view class="">
							检测订单
						</view>
						<view class="" style="margin-top: 10rpx;">
							{{datalist.testingorder}}
						</view>
					</view>
				</view>
			</view>
			<view class="its">
				<view class="zl">
					检测项目分布
				</view>
				<view class="" style="display: flex;margin-top: 20rpx;">
					<view class="tt" :class="search_index == 1 ? 'choice' : ''" @click="search_change(1)">
						检测项目
					</view>
					<view class="tt" :class="search_index == 2 ? 'choice' : ''" @click="search_change(2)" style="margin-left: 20rpx;">
						检测金额
					</view>
				</view>
				<view class="" style="margin-top: 20rpx;border: 1px solid #d9e2ff;">
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="table_item">
							排名
						</view>
						<view class="table_item">
							项目名称
						</view>
						<view class="table_item">
							检测项目
						</view>
						<view class="table_item">
							占比
						</view>
					</view>
					<view class="" v-if="projectlist.length > 0">
						<view class="" style="display: flex;justify-content: space-between;border-bottom: 1px solid #d9e2ff;" v-for="(item,index) in projectlist">
							<view class="table_item2">
								{{index + 1}}
							</view>
							<view class="table_item2">
								{{item.ssued}}
							</view>
							<view class="table_item2">
								{{item.bnum}}
							</view>
							<view class="table_item2">
								{{item.proportion}}%
							</view>
						</view>
					</view>
					<view class="" v-else style="text-align: center;color: #ccc;font-size: 28rpx;margin: 15rpx;">
						暂无更多数据
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clinic_id:'',
				url: this.global.url,
				datetimerange: [],
				page:1,
				search_index:1,
				datalist:{},
				projectlist:[]
			}
		},
		onLoad(option){
			this.clinic_id = option.id
			console.log(this.clinic_id)
			this.dangqian()
			
		},
		
		methods: {
			dangqian(){
				this.zhanshi = 0
				var date = new Date()
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day = date.getDate()
				this.datetimerange = [year+'-'+month+'-'+day,year+'-'+month+'-'+day]
				this.getdata()
				this.get_project_ranking() // 获取项目排行
			},
			go_orderlist(){
				uni.navigateTo({
					url:'/pages/myGroup/orderlist?clinic_id='+this.clinic_id
				})
			},
			search_change(type){
				this.search_index = type
				this.get_project_ranking()
			},
			changeTime(e) {
				this.datetimerange = e;
				if(e.length != 0){
					this.page = 0
					this.getdata()
					this.get_project_ranking()
				}
			},
			getdata(){
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: this.global.url + 'api/clinic/clinic_detail',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						id:that.clinic_id,
						start_time: that.datetimerange[0],
						end_time: that.datetimerange[1],
						// clinic_id: uni.getStorageSync('token')
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							// 存用户信息
							that.datalist = result.data
				
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			get_project_ranking(){
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: this.global.url + 'api/clinic/project_ranking',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						id:that.clinic_id,
						start_time: that.datetimerange[0],
						end_time: that.datetimerange[1],
						type:that.search_index
						// clinic_id: uni.getStorageSync('token')
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							// 存用户信息
							that.projectlist = result.data
				
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style>
.topcontent{
	width: 100%;
	background-color:#1262DB;
	color:#fff;
	padding: 20rpx;
}
.clinic_name{
	font-size: 34rpx;
	margin-left: 5rpx;
}
.bts{
	background-color: #fff;
	color: #1262DB;
	padding: 10rpx 15rpx;
	border-radius: 10rpx;
	font-size: 26rpx;
}
.bts2{
	color: #fff;
	padding: 10rpx 15rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.its{
	padding: 20rpx;
	border: 1px solid #ccc;
	border-radius: 10rpx;
	margin-top: 30rpx;
}
.zl{
	border-left: 6rpx solid #1262DB;
	padding-left: 20rpx;
	font-weight: bold;
}
.tt{
	background-color: #fff;
	border: 1px solid #1262DB;
	color: #1262DB;
	padding: 10rpx 15rpx;
	border-radius: 25rpx;
	font-size: 24rpx;
}
.table_item{
	width: 25%;
	text-align: center;
	background-color: #d9e2ff;
	padding: 20rpx;
	color: #1262DB;
	font-size: 28rpx;
	border-right: 1px solid #d9d9d9;
}
.table_item2{
	width: 25%;
	text-align: center;
	background-color: #ffffff;
	padding: 20rpx;
	color: #000;
	font-size: 28rpx;
	border-right: 1px solid #d9e2ff;
}
.choice{
	background-color: #1262DB;
	color: #fff;
}
</style>
